<template>
  <view class="order-list-page">
    <cu-custom bgColor="bg-gradual-fff" isBack="true">
      <block slot="content">交易记录</block>
    </cu-custom>
    <view v-if="orderlist.length > 0" class="order-container">
      <view class="filter-tabs">
        <view 
          v-for="tab in tabs" 
          :key="tab.status" 
          :class="['tab-item', {active: activeTab === tab.status}]"
          @click="changeTab(tab.status)"
        >
          {{tab.label}}
        </view>
      </view>
      <view class="order-list">
        <view 
          v-for="(order, index) in filteredOrders" 
          :key="order.id" 
          class="order-card"
          @click="viewOrderDetail(order.id)"
        >
          <view class="order-header">
            <text class="order-id">订单号: {{order.id}}</text>
            <text class="order-status" :class="order.status">{{getStatusText(order.status)}}</text>
          </view>
          <view class="goods-info">
            <text class="goods-id">商品ID: {{order.goodsId}}</text>
            <text class="goods-price">{{order.totalAmount.toFixed(2)}}积分</text>
          </view>
          <view class="contact-info">
            <text class="contact-name">交易人：{{order.contactName}}</text>
            <text class="contact-phone">电话：{{order.contactPhone}}</text>
          </view>
          <view class="order-time">
            <text v-if="order.createTime">{{formatTime(order.createTime)}}</text>
          </view>
          <view class="order-actions" v-if="order.status === 'pending'">
            <button class="action-btn cancel" @click.stop="cancelOrder(order.id)">取消订单</button>
          </view>
        </view>
      </view>
    </view>
    
    <view v-else class="empty-state">
      <image class="empty-img" src="/static/goods_null.png"></image>
      <view class="empty-text">还没有交易记录哈</view>
      <button class="empty-btn" @click="goShopping">看看市场</button>
    </view>
  </view>
</template>

<script>
import api from '../../common/apiService';
import request from '../../common/request';
export default {
  data() {
    return {
      isNull: false,
      id: 0,
      orderlist: [],
      activeTab: 'all',
      tabs: [
        { label: '全部', status: 'all' },
        { label: '待联系', status: 'pending' },
        { label: '已完成', status: 'completed' },
        { label: '已取消', status: 'canceled' }
      ]
    }
  },
  computed: {
    filteredOrders() {
      if (this.activeTab === 'all') return this.orderlist;
      return this.orderlist.filter(order => order.status === this.activeTab);
    }
  },
  methods: {
    getorderlist() {
      let optsList = {
        url: `api/booking/user/${this.id}`,
        method: 'get'
      };
      let _this = this;
      request.httpRequest(optsList).then(res => {
        if (res.data.code == 200) {
          _this.orderlist = res.data.data;
          _this.isNull = _this.orderlist.length === 0;
        } else {
          _this.isNull = true;
        }
      }).catch(() => {
        _this.isNull = true;
      });
    },
    getStatusText(status) {
      switch(status) {
        case 'pending': return '待联系';
        case 'completed': return '已完成';
        case 'canceled': return '已取消';
        default: return status;
      }
    },
    formatTime(time) {
      if (!time) return '';
      return new Date(time).toLocaleString();
    },
    changeTab(status) {
      this.activeTab = status;
    },
    viewOrderDetail(orderId) {
      uni.navigateTo({
        url: `/pages/sureorder/sureorder?id=${orderId}`
      });
    },
    cancelOrder(orderId) {
      uni.showModal({
        title: '确认取消',
        content: '确定要取消此订单吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '取消ing' });
			
			let optsList = {
			  url: `api/booking/cancel/${orderId}`,
			  method: 'put'
			};
			
			request.httpRequest(optsList).then(res => {
			  if (res.data.code == 200) {
			    // _this.orderlist = res.data.data;
			    // _this.isNull = _this.orderlist.length === 0;
				console.log("取消",res.data.data)
			  }
			})
			
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({ title: '订单已取消' });
              this.getorderlist(); 
            }, 1000);
          }
        }
      });
    },
    goShopping() {
      uni.navigateTo({
        url: '/pages/goodslist/goodslist'
      });
    }
  },
  mounted() {
    const uid = uni.getStorageSync('mid');
    this.id = uid;
    this.getorderlist();
  }
}
</script>

<style lang="scss">
.order-list-page {
  
  
  .filter-tabs {
    display: flex;
    background: #fff;
    padding: 20rpx 0;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #666;
      padding: 15rpx 0;
      position: relative;
      
      &.active {
        color: #FF4D4F;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 6rpx;
          background: #FF4D4F;
          border-radius: 3rpx;
        }
      }
    }
  }
  
  .order-list {
    padding: 0 20rpx;
  }
  
  .order-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .order-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      padding-bottom: 15rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      .order-id {
        font-size: 24rpx;
        color: #999;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .order-status {
        font-size: 26rpx;
        margin-left: 20rpx;
        
        &.pending {
          color: #FFB800;
        }
        
        &.completed {
          color: #19BE6B;
        }
        
        &.cancelled {
          color: #999;
        }
      }
    }
    
    .goods-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      
      .goods-id {
        color: #666;
        font-size: 28rpx;
      }
      
      .goods-price {
        font-weight: bold;
        color: #FF4D4F;
        font-size: 32rpx;
      }
    }
    
    .contact-info {
      display: flex;
      margin-bottom: 20rpx;
      font-size: 26rpx;
      
      .contact-name {
        margin-right: 30rpx;
      }
      
      .contact-phone {
        color: #666;
      }
    }
    
    .order-time {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 20rpx;
    }
    
    .order-actions {
      display: flex;
      justify-content: flex-end;
      
      .action-btn {
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 30rpx;
        font-size: 26rpx;
        margin-left: 20rpx;
        padding: 0 30rpx;
        
        &.cancel {
          background: #fff;
          color: #666;
          border: 1rpx solid #ddd;
        }
        
        &.primary {
          background: linear-gradient(90deg, #FF4D4F, #FF7676);
          color: #fff;
        }
      }
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 140rpx;
    margin-bottom: 100rpx;
    
    .empty-img {
      width: 300rpx;
      height: 300rpx;
      margin-bottom: 30rpx;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 40rpx;
    }
    
    .empty-btn {
      background: linear-gradient(90deg, #FF4D4F, #FF7676);
      color: #fff;
      width: 240rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
    }
  }
}
</style>